<template>
	<div class="userX—filex">
		<el-page-header @back="back">
		</el-page-header>
		<div class="filex">
			<img :src="imageUrl">
			<input type="file" ref="upfile" @change="onFileChange">
		</div>
		<div class="but">
			<button @click="updatefilex()">确定</button>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'UpdetFilex',
		data() {

			return {
				imageUrl: '',
			}
		},
		computed: {
			...mapState('user', ['user']),
		},
		created() {
			this.imageUrl = 'api/public/showimg/' + this.user.img
		},
		methods: {
			...mapActions('user', ['User']),
			onFileChange(event) {
				const file = event.target.files[0];
				if (file) {
					const reader = new FileReader();
					reader.onload = (e) => {
						this.imageUrl = e.target.result;
					};
					reader.readAsDataURL(file);
				}
			},
			updatefilex() {
				let filex = this.$refs.upfile.files[0];
				let param = new FormData();
				param.append("mypic", filex);
				this.$axios.post('/api/user/updatePic', param, {
						headers: {
							'Content-Type': 'multipart/form-data'
						},
					})
					.then((res) => {
						if (res.status == 200) {
							this.User(res.data.data)
							this.$message({
								message: '修改成功',
								type: 'success'
							})
						}
					}).catch((error) => {
						console.log(error);
					})
			},
			back() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped>
	.filex {
		display: flex;
		justify-content: space-around;
	}

	img {
		width: 80%;
		height: 20rem;
	}

	input[type='file'] {
		width: 80%;
		height: 20rem;
		text-align: center;
		position: absolute;
		opacity: 0;
	}
	.userX—filex .but{
		width: 100%;
		
	}
	.userX—filex .but button {
		display: block;
		margin: 20px auto;
		height: 40px;
		width: 60%;
		border-radius: 5px;
		border: none;
		background-color: #f0d4a0;
	}
</style>